<template>
    <el-container class="home-container">
        <!-- 头部区域 -->
        <el-header>
            <div style="margin-left: 15px;align-items: center" >
                <!-- logo -->
                <img src="../assets/logo.jpeg" width="61" height="56" style="border-radius: 10px" alt="">
                <!-- 顶部标题 -->
                <span>医院挂号管理系统</span>
            </div>
            <el-dropdown :hide-on-click="false">
                <el-avatar  :src="userinfo.picture"></el-avatar>
                <span style="font-weight: bolder;color: white;">{{userinfo.userName}}</span>
                <el-dropdown-menu slot="dropdown">
                    <span @click="initHome"><el-dropdown-item><svg-icon icon-file-name="user" />首页</el-dropdown-item></span>
                    <span @click="peopleCenter"><el-dropdown-item><svg-icon icon-file-name="user" />个人中心</el-dropdown-item></span>
                    <span @click="revisePassWord"><el-dropdown-item><svg-icon icon-file-name="lock" />修改密码</el-dropdown-item></span>
                    <span @click="quitSystem"><el-dropdown-item><svg-icon icon-file-name="component" />退出登录</el-dropdown-item></span>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container>
            <!-- 侧边栏 -->
            <el-aside width="200px">
                <!-- 侧边栏菜单 -->
                <el-menu
                        :unique-opened="true"
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#ffd04b" router
                        :default-active="$route.path">
                    <!-- 一级菜单 index代表要跳转的路径-->
                    <el-submenu :index="first.path" v-for="first in leftMenu">
                        <!-- 一级菜单模板 -->
                        <template slot="title">
                            <!-- 图标 -->
                            <svg-icon :icon-file-name="first.icon"/>
                            <!-- 文本 -->
                            <span style="margin-left: 15px">{{first.menuName}}</span>
                        </template>
                        <!-- 二级子菜单 -->

                        <!-- 二级子菜单 -->
                        <el-menu-item :index="second.path" v-for="second in first.children">
                            <!-- 二级菜单模板 -->
                            <template slot="title">
                                <!-- 图标 -->
                                <!--<svg-icon :icon-file-name="second.icon"/>-->
                                <a :class="second.icon"></a>
                                <!-- 文本 -->
                                <span style="margin-left: 15px" @click="showContent(second.path,second.menuName)">{{second.menuName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <!-- 主体结构 -->
            <el-main>
                <!--标签页-->
                <el-tabs type="card"   v-model="editableTabsValue" closable @tab-remove="removeTab" @tab-click="changeTab">
                    <el-tab-pane
                       v-for="(item,index) in editableTabs"
                       :key="item.name"
                       :label="item.title"
                       :name="item.name"
                       :url="item.url"
                       >
                        <span slot="label"><i class="el-icon-date"></i> {{item.title}}</span>
                        <div style="height: 100%">
                            <keep-alive>
                                <router-view v-if="item.title === editableTabsValue"/>
                            </keep-alive>
                        </div>
                    </el-tab-pane>
                </el-tabs>

            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    export default {
        name: "Index",
        data(){
          return {
              //当前的用户信息
               userinfo:{},
              //左侧菜单
               leftMenu:[],
              //标签页 开始
              editableTabsValue: '1',
              //标签页当前索引
              tabIndex: 1,
              //存放所有标签页
              editableTabs: [
              //     {
              //     title: '首页',
              //     name: '1',
              //     url: '/home',
              // }
              ],
          }
        },
        created() {
            this.initUserInfo();
            this.initLeftMenu();
            this.initHome();
        },
        methods:{
            initHome(){  //跳转首页
                this.$router.push("/home");
                // 取路由路径上的访问路径
                var homePath = this.$route.path // 路由传参
                // console.log("初始化跳转的路径是======"+homePath)
                this.showContent(homePath,"首页")
            },
            peopleCenter(){  //个人中心信息
                this.$router.push("/person/personCenter");
                // 取路由路径上的访问路径
                var peopleCenterPath = this.$route.path // 路由传参
                this.showContent(peopleCenterPath,"个人中心")
            },
            revisePassWord(){  //修改密码页面
                this.$router.push("/person/revisePassWord");
                // 取路由路径上的访问路径
                var passwordPath = this.$route.path // 路由传参
                this.showContent(passwordPath,"修改密码")
            },
            quitSystem(){  //退出登录系统
                this.$confirm('是否确认退出该系统?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.get("/system/api/user/quitSystem").then(result=>{
                        //清空浏览器中的token
                        sessionStorage.clear();
                        this.$router.push("/")
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消退出'
                    });
                });
            },
            initLeftMenu(){ //初始化左侧菜单
                this.$http.get("/system/api/menu/leftMenu").then(result=>{
                    this.leftMenu = result.data.data;
                })
            },
            initUserInfo(){ //初始化右上角角色信息
                this.$http.get("/system/api/user/info").then(result=>{
                    this.userinfo = result.data.data;
                })
            },
            changeTab(tab){  //改变标签页
                // console.log("==========切换标签页==========="+tab.$attrs.url)
                const path = this.$route.path // 路由传参
                this.$router.push(path)

                // this.$router.push(tab.$attrs.url)
            },
            //移除页签页
            removeTab(targetName) {
                //  将目前所有标签页赋值给tabs
                let tabs = this.editableTabs;
                //  将开始标签页的索引赋值给activeName
                let activeName = this.editableTabsValue;
                //比较当前标签页中的名字
                if (activeName === targetName) {
                    // console.log("==========正在移除标签页========"+targetName)
                    //遍历当前所有标签页中索引中的名字和当前标签页的名字比较
                    tabs.forEach((tab, index) => {
                        if (tab.name === targetName) {
                            let nextTab = tabs[index + 1] || tabs[index - 1];
                            if (nextTab) {
                                activeName = nextTab.name;
                                //把路由重定向到 当前的激活的路由
                                this.$router.push(nextTab.url);
                            }
                        }
                    });
                }
                //将当前标签页的索引 赋值给 开始索引
                this.editableTabsValue = activeName;
                this.editableTabs = tabs.filter(tab => tab.name !== targetName);
            },

            logout(){
                sessionStorage.clear();
            },
            //显示当前连接的内容
            showContent(url,menuName){
                //alert(url+","+menuName);
                //直接调用添加页签页
                this.addTab(menuName,url);
            },

            //添加标签页
            addTab(targetName,url) { //targetName 标签页名称   url 对应的地址
               // debugger
                let newTabName = targetName;
                //获取所有的标签页
                let tabs = this.editableTabs;
                //定义是否已经标签变量
                var  isHaveTab = false;
                //循环所有页签页 判断当前点击标签页名称已经存在
                tabs.forEach((tab, index) => {
                    //如果为true 说明当前点击节点（部门管理），已经存在标签页
                    if(targetName === tab.title){ // 判断是否相等  1=='1' 值相等  true   1==='1'  false 类型和值都香港等
                        isHaveTab = true;
                        newTabName =tab.title;
                    }
                });
                //如果不存在 添加一个
                if(!isHaveTab) {
                    // console.log("=======添加======="+targetName)
                    this.editableTabs.push({
                        title: targetName,
                        name: newTabName,
                        url: url
                    });
                }
                // console.log("添加后的所有标签页信息是====="+JSON.stringify(this.editableTabs))
                //如果存在，直接让高亮
                this.editableTabsValue = newTabName;
            },

        }
    }
</script>

<style>
    .home-container {
        height: 100%;
    }
    .el-header{
        background-color:#373D41;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;

    }
    .el-header> div{
        display: flex;
        align-items: center;

    }
    .el-header> div> span{
        margin-left: 15px;
    }
    .el-aside{
        background-color:#333744;

    }
    .el-aside> .el-menu{
        border-right: none;
    }
    .el-main{
        background-color:white;
        padding: 0px 10px;
    }
    .toggle-button{
        display: flex;
        justify-content: center;
        color: white;
    }
</style>
